<template>
  <div>
    <button>PurchaseApplier</button>
    <ElForm inline>
      <ElFormItem label="">
        <ElInput v-model="queryCondition.nameLike"></ElInput>
      </ElFormItem>
      <ElFormItem label="最小金额">
        <ElInputNumber v-model="queryCondition.minAmount"></ElInputNumber>
      </ElFormItem>
      <ElFormItem label="最大金额">
        <ElInputNumber v-model="queryCondition.maxAmount"></ElInputNumber>
      </ElFormItem>
      <ElFormItem
        ><ElButton type="primary" @click="queryByCondition()">搜索</ElButton>
        <ElButton type="primary" @click="reset()" plain>刷新</ElButton>
        <ElButton type="primary" @click="open4Insert()" plain>添加</ElButton>
      </ElFormItem>
    </ElForm>
    <ElTable :data="results">
      <ElTableColumn label="编号" prop="billId"></ElTableColumn>
      <ElTableColumn label="提供方" prop="supplier"></ElTableColumn>
      <ElTableColumn label="订单状态"
        ><template #default="{ row }">
          <template v-for="(e, i) in billStates" :key="i">
            <ElTag v-if="row.billState === e.value" :type="e.color">{{ e.label }}</ElTag>
          </template>
        </template></ElTableColumn
      >
      <ElTableColumn label="状态" prop="billState"></ElTableColumn>
      <ElTableColumn label="付款金额" prop="amount"></ElTableColumn>
      <ElTableColumn label="交货日期">
        <template #default="{ row }">{{ time(new Date(row.receiveDate)) }}</template>
      </ElTableColumn>
    </ElTable>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="queryCondition.pageSize"
      @current-change="queryByCondition"
    />
    <PurchaseInsert ref="purchaseinsert"></PurchaseInsert>
  </div>
</template>
<script lang="ts">
import { billStates, type PurchaseBill } from '@/entity/purchase.entity'

/**
 * 页面核心数据结构体说明文档
 *
 *
 */
// import from

export default {
  name: 'PurchaseApplier',
  props: {
    sampleP: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      billStates,
      sampleD: 'value',
      queryCondition: {
        minAmount: 0,
        maxAmount: 0,
        nameLike: '',
        pageSize: 5,
        pageNum: 1
      },
      total: 0,
      results: [] as Array<PurchaseBill>
    }
  },
  computed: {
    /* sampleC() {
      return this.sampleD + "--";
    }, */
  },
  created() {},
  mounted() {
    this.queryByCondition()
  },
  methods: {
    // sampleM() {},
    reset() {
      this.queryCondition = {
        minAmount: 0,
        maxAmount: 0,
        nameLike: '',
        pageSize: 5,
        pageNum: 1
      }
      this.queryByCondition()
    },
    async queryByCondition(pageNum?: number) {
      if (pageNum) {
        this.queryCondition.pageNum = pageNum
      }
      await axios({
        method: 'POST',
        url: 'http://127.0.0.1:7001/purchase/query/applier',
        data: this.queryCondition
      }).then(
        (res) => {
          this.total = res.data.total
          this.results = res.data.results
          console.log(res.data.results)
        },
        (error) => {
          console.log(error.response.data)
        }
      )
      console.log(this.results)
      console.log(this.total)
    },
    time(date: Date) {
      const datec =
        date.getFullYear() +
        '年' +
        (date.getMonth() + 1) +
        '月' +
        date.getDate() +
        '日' +
        date.getHours() +
        '时' +
        date.getMinutes() +
        '分'
      //用法
      // <ElTableColumn> <template #default="{ row }">
      //     <span>{{ time(new Date(row.applytime)) }}</span>
      //   </template></ElTableColumn>
      return datec
    },
    open4Insert(){
      const purchaseinsert:any=this.$refs.purchaseinsert
      purchaseinsert.show()
    }
  },
  watch: {
    // sampleP(n, o) {},
  }
}
</script>

<!--<style scoped>-->
<style lang="scss" scoped></style>
